<template>
  <div class="focus-record">
    <field-textarea v-model="content" placeholder="说说今天的感想和收获吧..." />
    <block-card v-if="loading || list.length" title="历史记录">
      <div v-for="item in list" :key="item.id" class="record-item">
        <div class="record-item__title">{{ item.createTime }}</div>
        <div class="record-item__content">{{ item.comment }}</div>
      </div>
    </block-card>
    <fixed-bottom>
      <button-group confirm-text="发表" @cancel="back" @confirm="onConfirm" />
    </fixed-bottom>
  </div>
</template>

<script>
import FixedBottom from '@/components/FixedBottom'
import ButtonGroup from '@/components/ButtonGroup.vue'
import FieldTextarea from '@/components/FieldTextarea.vue'
import BlockCard from '@/pages/home/components/BlockCard.vue'
import { saveTranComment, getTramCommentList } from '../../api'
import loadMoreMixin from '@/mixins/loadMoreMixin'
export default {
  components: {
    FixedBottom,
    ButtonGroup,
    FieldTextarea,
    BlockCard
  },
  mixins: [loadMoreMixin],
  data() {
    return {
      list: [],
      content: '',
      articleId: ''
    }
  },
  onLoad(options) {
    this.articleId = options.id
    this.loadMore()
  },
  methods: {
    async loadMore() {
      this.loading = true
      const data = await getTramCommentList(this.page, this.articleId)
      console.log(data)
      this.list = this.list.concat(data)
      this.finished = data.length < this.page.limit
      this.loading = false
    },
    onConfirm() {
      if (!this.content) {
        this.showMsg('请输入内容再发表')
        return
      }
      saveTranComment({
        articleId: this.articleId,
        comment: this.content
      }).then(res => {
        this.showMsg('发表成功', 'success')
        setTimeout(this.back, 1500)
      })
    }
  }
}
</script>

<style lang="less">
.focus-record {
  .record-item {
    padding: 30px 0;
    box-shadow: inset 0 -2px 0 0 #f5f5f5;
    &__title {
      font-size: 28px;
      color: #999999;
      margin-bottom: 10px;
    }
    &__content {
      text-indent: 2em;
      font-size: 32px;
      color: #333;
      line-height: 1.5;
    }
  }
}
</style>
